<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type">
</head>
<body>
	<div data-role="page" id="activityEdit">
		<div data-role="header" data-theme="b">
			<a href="index.html" data-role="button" data-rel="back"	class="ui-btn-left" data-mini="true" data-inline="true">返回</a>
			<h1>活动信息</h1>
			<a id="edit" href="#" data-role="button" class="ui-btn-right" data-mini="true"	data-inline="true">编辑</a>
			<a id="next" href="#" data-role="button" class="ui-btn-right" data-mini="true"	data-inline="true">下一个</a>
			<div data-role="navbar" data-theme="c">
				<ul>
					<li><a href="#" class="tab ui-btn-active">活动</a></li>
					<li><a href="#" class="tab">时间</a></li>
					<li><a href="#" class="tab">地点</a></li>
					<li><a href="#" class="tab">人员</a></li>
				</ul>
			</div>
		</div>
		<div data-role="content" style="padding: 0px" data-theme="c">
			<ul id="tabContent0" class="tabContent" data-role="listview" data-inset="false" data-theme="c" style="margin: 0px;">
				<li> 
					 <div style="text-align: center;">活动名称</div> 
					 <div >活动详情动详情动详情动详情动详情动详情动详情动详情动详情动详情动详情动详情动详情动详情动详情动详情动详情</div> 
				 </li>
			</ul>
			<ul id="tabContent1" class="tabContent" data-role="listview" data-inset="false" style="margin: 0px; display: none" data-theme="c">
				<li style="padding: 0px">
					<div id="calendar1"></div>
				</li>
			</ul>
			<ul id="tabContent2" class="tabContent" data-role="listview" data-inset="false" style="margin: 0px; display: none" data-theme="c">
				<li style="padding: 0px">
					<div data-role="controlgroup" data-type="horizontal" data-mini="true" style="text-align: center;margin:5px">
					    <a href="#" id="walk" data-role="button" data-icon="walk" data-iconpos="notext" data-theme="c" data-inline="true">步行</a>
					    <a href="#" id="bus" data-role="button" data-icon="bus" data-iconpos="notext" data-theme="c" data-inline="true">公交</a> 
					    <a href="#" id="car" data-role="button" data-icon="car" data-iconpos="notext" data-theme="c" data-inline="true">开车</a> 
					</div>
					<div id="map"></div>
				</li>
			</ul>
			<ul id="tabContent3" class="tabContent" data-role="listview" data-inset="false" style="margin: 0px; display: none" data-theme="c">
				<li style="padding: 0px;border:0px"> 
				    <div data-role="controlgroup" data-type="horizontal" class="card" data-name="rwerwe" data-phoneno="13861338550">
				    	<div><img src="images/defaultAvatar.gif" class="avatar"></div>
				    	<div class="cardName">rwerwe</div>
				    	<div data-role="controlgroup" data-type="horizontal" data-mini="true" style="text-align: center;margin:5px">
						    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">电话</a>
						    <a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">短信</a> 
						</div>
				    </div>
				     <div data-role="controlgroup" data-type="horizontal" class="card" data-name="rwerwe" data-phoneno="13861338550">
				    	<div><img src="images/defaultAvatar.gif" class="avatar"></div>
				    	<div class="cardName">rwerwe</div>
				    	<div data-role="controlgroup" data-type="horizontal" data-mini="true" style="text-align: center;margin:5px">
						    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">电话</a>
						    <a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">短信</a> 
						</div>
				    </div>
				</li>
			</ul>

		</div>
		 
		<div data-role="popup" id="createCard" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
		    <div data-role="header" data-theme="b" class="ui-corner-top">
		        <h1>增加参与人员</h1>
		    </div>
		    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
		       <label for="select-choice-a" class="select" >姓名</label>
				<div style="margin:15px 0px" id="name">
					<ul id="phonenolist" data-role="listview" data-inset="true" data-filter-reveal="true"  data-filter="true" data-filter-placeholder="" style="max-height:150px;overflow:auto">
					    <li><a href="#" class="phoneCard" data-icon="check" data-name='咋个' data-phoneno="13861338550" onclick="alert(342)">
					        <img src="images/defaultAvatar.gif">
					        <h2>Broken Bells</h2>
					        <p>Broken Bells</p></a> 
					    </li>
					    <li><a href="#" data-name='咋个' data-phoneno="13861338550">
					        <img src="images/defaultAvatar.gif">
					        <h2>短信内容</h2>
					        <p>13861338550</p></a> 
					    </li>
					    <li><a href="#" data-name='咋个' data-phoneno="13861338550">
					        <img src="images/defaultAvatar.gif">
					        <h2>短信内容</h2>
					        <p>13861338550</p></a> 
					    </li>
					    <li><a href="#" data-name='咋个' data-phoneno="13861338550">
					        <img src="images/defaultAvatar.gif">
					        <h2>短信内容</h2>
					        <p>13861338550</p></a> 
					    </li>
					    <li><a href="#" data-name='咋个' data-phoneno="13861338550">
					        <img src="images/defaultAvatar.gif">
					        <h2>短信内容</h2>
					        <p>13861338550</p></a> 
					    </li>
					    <li><a href="#" data-name='咋个' data-phoneno="13861338550">
					        <img src="images/defaultAvatar.gif">
					        <h2>短信内容</h2>
					        <p>13861338550</p></a> 
					    </li>
					    
					</ul>
				</div>
				 <label	for="select-choice-a" class="select">电话号码</label> 
				 <input	id="phoneno" name="phoneno"  type="text">  
				 <div style="text-align: center;">
					 <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">取消 </a>
			        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">确定</a>
				 </div>
		    </div>
		</div>
		<div id="msg" data-role="popup" data-overlay-theme="a" class="ui-content">
			<h3>群发短信给参与人员</h3> 
			<ul  data-role="listview" data-inset="true" data-theme="c" style="margin: 0px;">
				<li>
					<label for="select-choice-a" class="select" >短信内容</label> 
					<textarea cols="40" rows="12" name="textarea" id="textarea"></textarea>
				 </li>
				  <li class="ui-body ui-body-b">
		            <fieldset class="ui-grid-a">
		                    <div class="ui-block-a"><button type="submit" data-theme="d" data-rel="back">取消</button></div>
		                    <div class="ui-block-b"><button type="submit" data-theme="b" data-rel="back">确定</button></div>
		            </fieldset>
		        </li>
			</ul>
		</div>
		 
		<!-- /content 
		
		$("#activityEdit").on("pageinit", function() { 
			var options = new ContactFindOptions(); 
			options.filter="";
			options.multiple=true; 
			var fields = ["displayName", "phoneNumbers"];
			navigator.contacts.find(fields
					, function(contacts) {
							contacts.sort(function(a,b){
								return a.displayName<b.displayName;
							});
							$("#phonenolist").empty();
							for (var i=0; i<contacts.length; i++) { 
								var phoneNumbers = contacts[i].phoneNumbers; 
								for (var j=0; j<phoneNumbers.length; j++) { 
									$("#phonenolist").append('<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c ui-screen-hidden"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">'
									+'<a class="phoneCard ui-link-inherit" href="#">'
							        +'<img src="images/defaultAvatar.gif" class="ui-li-thumb">'
							        +'<h2 class="ui-li-heading">'+contacts[i].displayName.substr(0,4)+'</h2>'
							        +'<p class="ui-li-desc">'+phoneNumbers[j].value+'</p></a> '
							        +'</div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>');
									
								}
							}
							
						}
					, function(){alert('onError!');}
					, options);
		});
		
		
		-->
		<script>
		
			$("#activityEdit").on("pageshow", function() {
				var cal = $("#calendar1").calendar({enable : true});

				$(".tab").click(function() {
					var index = $(".tab").index($(this));
					$(".tabContent").hide();
					$("#tabContent" + index).show();
				});
		 
				$("#map").height($(document).height()-142);  
				var map = new BMap.Map("map"); 
				
				var point = new BMap.Point(120.728293,31.324715);
				var stardPoint;
				map.centerAndZoom(point, 15);  
				var startMarker = new BMap.Marker(point,{icon:new BMap.Icon("images/startmarker.png", new BMap.Size(29,32))});  // 创建标注 
				var endMarker = new BMap.Marker(point,{icon:new BMap.Icon("images/endmarker.png", new BMap.Size(29,32))});  // 创建标注 
				startMarker.enableMassClear(); 
				endMarker.enableMassClear(); 
				
				map.addOverlay(startMarker);              // 将标注添加到地图中
				map.addOverlay(endMarker);              // 将标注添加到地图中
				startMarker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				
	            map.enableScrollWheelZoom();  
				map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右上角，仅包含平移和缩放按钮
				
			    var geolocation = new BMap.Geolocation();
			    geolocation.getCurrentPosition(function(r){
			        if(this.getStatus() == BMAP_STATUS_SUCCESS){ 
			            map.centerAndZoom(r.point,15);  
			            startMarker.setPosition( map.getCenter());
			        }else { 
			            alert("网络不通，请稍后再试。");
			        }

			    })

			    map.addEventListener("moving", function showInfo(){
			    	 var cp = map.getCenter();  
			    	 startMarker.setPosition(cp);
			    });
			    map.addEventListener("zoomend", function showInfo(){
			    	 var cp = map.getCenter(); 
			    	
			    	 startMarker.setPosition(cp);
			    });
			    $("#car").click(function(){
			    	if(!stardPoint)
			    	stardPoint = map.getCenter();
					//alert(stardPoint.lng+","+stardPoint.lat)
			    	var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
			    	driving.search(stardPoint, point);
			    	map.clearOverlays();
			    });
			    $("#bus").click(function(){
			    	if(!stardPoint)
			    	stardPoint = map.getCenter(); 
			    	var transit = new BMap.TransitRoute(map, {renderOptions: {map: map}});
			    	transit.search(stardPoint, point);
			    	map.clearOverlays();
			    });
			    $("#walk").click(function(){
			    	if(!stardPoint)
			    	stardPoint = map.getCenter(); 
			    	var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
			    	walking.search(stardPoint, point);
			    	map.clearOverlays();
			    });
			    $("#save").click(function(){
			    	var activity = {};
			    	activity.name = $("#aname").val();
			    	activity.sponsor = $("#asponsor").val();
			    	activity.phoneno = $("#aphoneno").val();
			    	activity.desc = $("#adesc").val();
			    	var point = map.getCenter();
			    	activity.lng = point.lng;
			    	activity.lat = point.lat;
			    	
			    	var datatimes= new Array();
			    	var selectedDate = cal.getDate();
					for(var date in selectedDate){
						datatimes.push({date:date,time:selectedDate[date].time});
					}
			    	activity.dateTime = datatimes;
			    	
			    	var partners= new Array();
			    	$.each($(".card"),function(i,n){
			    		if($(n).attr('data-name'))
			    			partners.push({name:$(n).attr('data-name'),phoneno:$(n).attr('data-phoneno')});
			    	});
			    	activity.partner = partners;
			    	saveActivity(activity);
			    });
			    
			    $("#name input").focus(function(){
			    	$("#phonenolist").show();
			    }); 
				 $("#phonenolist li a").click(function(){ 
				    	$("#name input").val($(this).find("h2").html());
				    	$("#phoneno").val($(this).find("p").html());
				    	$("#phonenolist").hide();
				  });
				 $(".card").on("dblclick",function(){
					 $(this).remove();
				 });
			});
		</script>
	</div>

</body>

</html>